<template>
    <view>
        <view class="w-1 fr-s-c" style="padding: 28rpx 32rpx;" v-for="(item,index) in info.order_items" :key="index">
            <image :src="item.pro_thumb" mode="aspectFill" style="width: 116rpx; height: 116rpx; border-radius: 8rpx;">
            </image>
            <text class="text-line-2 flex-1" style="margin-left: 25rpx;">{{item.pro_title}}</text>
        </view>
        <u-gap height="12" bgColor="#F4F4F4" class="w-1"></u-gap>
        <view class="fr-b-c w-1" style="padding: 22rpx 32rpx;" @click="show=true">
            <text class="fs-32 fm-ali" style="color: #000000;">退款原因</text>
            <view class="fr-s-c">
                <text class="fs-26 fm-ali" style="color: #999999;">{{reasonIndex<0?'请选择':reasonList[reasonIndex]}}</text>
                <u-icon name="arrow-right" color="#999999" size="18"></u-icon>
            </view>
        </view>
        <u-gap height="12" bgColor="#F4F4F4"></u-gap>
        <view class="fl-c-s w-1 fm-ali" style="padding: 22rpx 32rpx;">
            <view class="fr-b-c w-1" style="color: #000000;">
                <text class="fs-32">申请金额</text>
                <text class="fs-26">￥{{info.total_can_tui_money}}</text>
            </view>
						<!-- pay_money -->
            <text class="fs-22" style="margin-top: 4rpx; color:#999999;">不可修改，商品金额￥{{info.total_can_tui_money}}</text>
        </view>
        <u-gap height="12" bgColor="#F4F4F4"></u-gap>
        <view class="fl-c-s w-1 fm-ali" style="padding: 22rpx 32rpx; border-bottom: 2rpx solid #F0F0F0;">
            <view class="fr-b-c w-1" style="color: #000000;">
                <view class="fr-s-e" style="align-items: baseline;">
                    <text class="fs-32">补充描述</text>
                    <text class="fs-22" style="color: #999999;">（选填）</text>
                </view>
                <text class="fs-26">￥{{info.total_can_tui_money}}</text>
            </view>
            <input type="text" v-model="remark" class="w-1 myinput" placeholder="请填入补充描述" />
        </view>
        <!-- 提交按钮 -->
        <view class="iphonex fr-c" style="background: #FFFFFF;">
        	<view class="fr-c sub-btn" @click="subInfo">提交</view>
        </view>
				<!-- 原因弹窗 -->
				<u-popup class="fl-s-c relative" v-model="show" closeOnClickOverlay mode="bottom" @close="show=false" :customStyle="{
					borderRadius:'60rpx 60rpx 0 0',
					overflow:'hidden'
				}">
				<image src="/static/images/user/reason_bg.png" class="w-1 absolute" style="left: 0; top: 0; height: 276rpx;"></image>
				<image src="/static/images/user/close_pup.png" @click="show=false" class="absolute" style="right: 30rpx; top: 60rpx; height: 22rpx; width: 22rpx;"></image>
						<view class="fl-s-c" style="margin: auto; height: 1052rpx; width: 686rpx;">
								<text style="color: #000000; margin-top: 72rpx;" class="fs-32 fm-ali">退款原因</text>
								<scroll-view scroll-y style="height: 757rpx; margin-top: 60rpx;">
									<view class="w-1 fr-b-c reason-item" v-for="(item,index) in reasonList" :key="index" @click="changeReason(index)">
										<text>{{item}}</text>
										<image :src="index==reasonIndex?'/static/images/shopcar/color_selected.png':'/static/images/shopcar/noc_not_select.png'" style="width: 36rpx; height: 36rpx;"></image>
									</view>
								</scroll-view>
								<view class="w-1 fr-c fs-30 fm-ali" @click="show = false" style="height: 96rpx; color: #666666;">确定</view>
						</view>
				</u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
							show:false,
							reasonList:[],
							reasonIndex:-1,
							info:'',
							remark:'',   // 备注
            }
        },
				onLoad(e) {
					this.info = JSON.parse(decodeURIComponent(e.item))
					this.getReason()
					console.log(this.info)
				},
        methods: {
					getReason(){
						this.$get({
							url:'/mainwxapp/getReason',
							loading:false
						}).then(res=>{
							this.reasonList = res.reason
						})
					},
					changeReason(index){
						console.log(index)
						this.reasonIndex = index
					},
					subInfo(){
						if(this.reasonIndex<0) return this.$u.toast('请选择退款原因');
						this.$get({
							url:'/mainwxapp/cancelPaymentOrder',
							data:{
								order_id:this.info.order_id,
								remark:this.remark,
								reason:this.reasonList[this.reasonIndex]
							}
						}).then(res=>{
							uni.showToast({
								title:res.msg,
								mask:true
							})
							let pages = getCurrentPages(); //当前页面栈
							let prevPage = pages[pages.length - 2]; //上一页面
							setTimeout(() => {
								uni.navigateBack()
								prevPage.$vm.fresh()
							}, 1500)
						})
					},
        }
    }
</script>

<style>
    page{
    	padding-bottom: 180rpx;
    }
    .myinput {
        font-size: 26rpx;
        font-family: Alibaba;
        color: #999999;
        margin-top: 28rpx;
    }
    .sub-btn{
    	width: 686rpx;
    	height: 100rpx;
    	background: linear-gradient(246deg, #FA360A 0%, #FA8C0A 100%);
    	box-shadow: 0rpx 6rpx 32rpx 2rpx rgba(250, 74, 20, 0.58);
    	border-radius: 50rpx;
    	font-size: 32rpx;
    	font-family: Alibaba;
    	color: #FFFFFF;
    	margin-bottom: 30rpx;
    }
		.reason-item{
			padding: 40rpx 0;
			color: #666666;
			font-size: 28rpx;
			font-family: Alibaba;
			border-bottom: 2rpx solid #F0F0F0;
		}
</style>
